var VueRouter = function({routes=[]}){
    //保存用户传递过来的路由配置
    this.routes = routes;
    //先定义一个data普通对象，有一个currentPath属性代表当前路径
    let data = {currentPath:window.location.hash.slice(1)||'/'}
    //把此data对象传递给了new Vue,那么data对象就变成响应式的了
    //可以收集依赖，派发更新，如果一个组件访问了这个属性，那以后这个属性变了，会让组件重新更新
    new Vue({data});
    //再做一个属性代理，给this也就是vueRouter的实例定义一个currentPath属性
    Object.defineProperty(this,'currentPath',{
        get(){
            return data.currentPath;
        },
        set(newValue){
            data.currentPath=newValue;
        }
    });
    //监听hash路径的变化，当hash路径发生变化后刷新页面
    window.addEventListener('hashchange',()=>{
        debugger
        this.currentPath = window.location.hash.slice(1)||'/';
    });
    //让当前的路径中的hash值等于this.currentPath
    //只有当当前的路径没有hash的时候，用来设置默认的hash值/
    window.location.hash = this.currentPath;
}
//Unknown custom element: <router-link> - did you register the component correctly
//用当前router.currentPath和routes里的路由记录的path进行匹配，找到匹配的条目，找到后渲染对应的组件
//也就是说这个组件包含了比较 复杂的逻辑计算，就不用template,render
//定义一个全局组件
Vue.component('router-view',{
   functional:true,//指定这个组件是一个函数式组件
   //functionalRenderContext函数式组件渲染上下文
   render(createElement,functionalRenderContext){//render函数会经过计算返回一个虚拟DOM，最终会渲染这个返回虚拟DOM
    debugger
    //当前此router-view函数组件父亲其实就是Vue实例,Vue实例上挂了一个$router属性指向VueRouter实例
    //VueRouter实例上有routes代表路径配置，currentPath代表当前路径
    let {$router} = functionalRenderContext.parent;
     //遍历routes数组中的每一项，判断每一route是否满足匹配的条件
    let matched = $router.routes.find(route=>{
        return route.path === $router.currentPath;//route中的路径和当前路径是匹配的
    });
    //如果找到了匹配的条目，那就创建一个此条目对应的组件的虚拟DOM并返回，如果没有匹配，就什么都不渲染
    //createElement(Home)
    //此虚拟DOM会变成真实DOM并替换掉<router-view></router-view>
    return matched?createElement(matched.component):null;
   }
});

//Unknown custom element: <router-view> - did you register the component correctly?
Vue.component('router-link',{
    props:['to'],
    render(createElement){
        //this.$slots 是传递的插槽数据 default指的是默认插槽数据
        return createElement('a',{attrs:{href:'#'+this.to}},this.$slots.default);
    }
});

VueRouter.install = function(Vue){
    //给Vue混入一个选项对象，里面会提供一个生命周期函数，叫beforeCreate
    Vue.mixin({
        beforeCreate:function(){//在创建Vue实例之前
            //如果在选项中传递了router属性
            if(this.$options.router){
                //就把router的实例保存到了Vue.prototype上
                Vue.prototype.$router = this.$options.router;
            }
        }
    })
}